<!-- 引入相关js文件 -->
<script src="/plugins/MultiSgp4/js/MultiSgp4.js"></script>

<!-- 引入相关css文件 -->
<link rel="stylesheet" href="/plugins/MultiSgp4/css/MultiSgp4.css">

<!-- 定义界面内容 -->
<div id="plugins_MultiSgp4_container" class="demo">   
    <!-- 卫星数据管理表格 -->
    <div style="margin-top: 20px;">
        <div>
            <p>
                 一个两行根数文件(格式可以为2行或3行)包含多个卫星的TLE,这些卫星作为一组物体在3D中显示(点大小和颜色都一致)。
            </p>
            <p>
                本插件支持加载多个两行根数文件,文件之间可使用不同点大小和颜色显示。默认所有卫星都使用SGP4算法计算位置。
            </p>            
        </div>
        <button class="load-file-btn" onclick="Plugins.values['Plugins_MultiSgp4'].loadFile();">
            📄 加载两行根数文件(tle,tce,txt或json)
        </button>
        <h4 style="color: #ffffff; margin-top: 15px;">已加载的卫星文件</h4>
        <table id="satelliteTable" border="1" style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background-color: #2c3e50;">
                    <th style="padding: 8px; color: #ffffff; font-weight: bold;">名称</th>
                    <th style="padding: 8px; color: #ffffff; font-weight: bold;">历元时间</th>
                    <th style="padding: 8px; color: #ffffff; font-weight: bold;">点大小</th>
                    <th style="padding: 8px; color: #ffffff; font-weight: bold;">点颜色</th>
                    <th style="padding: 8px; color: #ffffff; font-weight: bold;">显示</th>
                    <th style="padding: 8px; color: #ffffff; font-weight: bold;">删除</th>
                </tr>
            </thead>
            <tbody id="satelliteTableBody">
                <!-- 动态添加的行将在这里显示 -->
            </tbody>
        </table>
    </div>
</div>